<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 页面标题 -->
    <view class="bg-white px-32rpx py-24rpx border-b border-gray-200">
      <text class="text-36rpx font-bold text-gray-800">订单管理</text>
    </view>

    <!-- Tab切换 -->
    <view class="bg-white px-32rpx py-24rpx">
      <view class="flex bg-gray-100 rounded-16rpx p-8rpx">
        <view 
          v-for="tab in tabs" 
          :key="tab.key"
          class="flex-1 text-center py-16rpx rounded-12rpx cursor-pointer transition-all"
          :class="activeTab === tab.key ? 'bg-orange-500 text-white' : 'text-gray-600'"
          @tap="switchTab(tab.key)"
        >
          <text class="text-28rpx font-medium">{{ tab.label }}</text>
        </view>
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="px-32rpx py-24rpx">
      <view v-if="filteredOrders.length === 0" class="text-center py-120rpx">
        <text class="text-32rpx text-gray-400">暂无{{ tabs.find(t => t.key === activeTab)?.label }}订单</text>
      </view>
      
      <view v-else>
        <view 
          v-for="order in filteredOrders" 
          :key="order.id"
          class="bg-white rounded-24rpx p-32rpx mb-24rpx shadow-sm"
          @tap="viewOrderDetail(order)"
        >
          <!-- 订单头部信息 -->
          <view class="flex items-center justify-between mb-24rpx">
            <view class="flex items-center">
              <text class="text-28rpx font-bold text-gray-800 mr-16rpx">订单 #{{ order.id }}</text>
              <view 
                class="px-16rpx py-8rpx rounded-16rpx text-24rpx"
                :class="getStatusClass(order.status)"
              >
                <text>{{ order.statusText }}</text>
              </view>
            </view>
            <text class="text-24rpx text-gray-500">{{ order.createTime }}</text>  
          </view>

          <!-- 配送地址 -->
          <view class="flex items-start mb-24rpx">
            <text class="text-28rpx mr-16rpx">📍</text>
            <view class="flex-1">
              <text class="text-28rpx text-gray-800 font-medium block">{{ order.address.name }}</text>
              <text class="text-26rpx text-gray-600">{{ order.address.detail }}</text>
            </view>
          </view>

          <!-- 商品信息 -->
          <view class="bg-gray-50 rounded-16rpx p-24rpx mb-24rpx">
            <view 
              v-for="item in order.items.slice(0, 2)" 
              :key="item.id"
              class="flex justify-between items-center mb-16rpx last:mb-0"
            >
              <text class="text-28rpx text-gray-800">{{ item.name }}</text>
              <text class="text-26rpx text-gray-600">x{{ item.quantity }}</text>
            </view>
            <text v-if="order.items.length > 2" class="text-26rpx text-gray-500">
              等{{ order.items.length }}件商品
            </text>
          </view>

          <!-- 订单金额和操作 -->
          <view class="flex items-center justify-between">
            <view>
              <text class="text-32rpx font-bold text-red-500">¥{{ order.totalAmount.toFixed(2) }}</text>
              <text class="text-26rpx text-gray-500 ml-16rpx">配送费 ¥{{ order.deliveryFee.toFixed(2) }}</text>
            </view>
            
            <view class="flex gap-16rpx">
              <nut-button 
                v-if="order.status === 'pending'"
                size="small" 
                type="primary"
                class="bg-orange-500 border-orange-500"
                @click.stop="acceptOrder(order)"
              >
                接单
              </nut-button>
              
              <nut-button 
                v-if="order.status === 'accepted'"
                size="small" 
                type="primary"
                class="bg-blue-500 border-blue-500"
                @click.stop="startDelivery(order)"
              >
                开始配送
              </nut-button>
              
              <nut-button 
                v-if="order.status === 'delivering'"
                size="small" 
                type="primary"
                class="bg-green-500 border-green-500"
                @click.stop="completeDelivery(order)"
              >
                完成配送
              </nut-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from '@tarojs/taro'

/**
 * 骑手订单列表页面 - 管理配送订单
 * 性能优化：订单状态过滤，分页加载
 */

interface OrderItem {
  id: number
  name: string
  quantity: number
  price: number
}

interface Address {
  name: string
  phone: string
  detail: string
}

interface DeliveryOrder {
  id: string
  status: 'pending' | 'accepted' | 'delivering' | 'completed' | 'cancelled'
  statusText: string
  createTime: string
  address: Address
  items: OrderItem[]
  totalAmount: number
  deliveryFee: number
  estimatedTime: number
}

interface Tab {
  key: string
  label: string
}

const router = useRouter()

// 响应式数据
const activeTab = ref('pending')

// Tab选项
const tabs = ref<Tab[]>([
  { key: 'pending', label: '待接单' },
  { key: 'accepted', label: '已接单' },
  { key: 'delivering', label: '配送中' },
  { key: 'completed', label: '已完成' }
])

// 模拟订单数据
const orders = ref<DeliveryOrder[]>([
  {
    id: 'D001',
    status: 'pending',
    statusText: '待接单',
    createTime: '10:30',
    address: {
      name: '张先生',
      phone: '138****8888',
      detail: '北京市朝阳区三里屯SOHO A座1202'
    },
    items: [
      { id: 1, name: '珍珠奶茶', quantity: 2, price: 18 },
      { id: 2, name: '芒果布丁奶茶', quantity: 1, price: 22 }
    ],
    totalAmount: 58,
    deliveryFee: 8,
    estimatedTime: 25
  },
  {
    id: 'D002', 
    status: 'accepted',
    statusText: '已接单',
    createTime: '10:15',
    address: {
      name: '李女士',
      phone: '139****6666',
      detail: '北京市朝阳区工体北路1号'
    },
    items: [
      { id: 3, name: '招牌奶茶', quantity: 1, price: 20 }
    ],
    totalAmount: 28,
    deliveryFee: 8,
    estimatedTime: 30
  },
  {
    id: 'D003',
    status: 'delivering', 
    statusText: '配送中',
    createTime: '09:45',
    address: {
      name: '王先生',
      phone: '137****5555',
      detail: '北京市东城区王府井大街1号'
    },
    items: [
      { id: 4, name: '水果茶', quantity: 2, price: 25 },
      { id: 5, name: '柠檬蜂蜜茶', quantity: 1, price: 18 }
    ],
    totalAmount: 76,
    deliveryFee: 8,
    estimatedTime: 10
  }
])

// 计算属性
const filteredOrders = computed(() => 
  orders.value.filter(order => order.status === activeTab.value)
)

// 方法
const switchTab = (tabKey: string) => {
  activeTab.value = tabKey
}

const getStatusClass = (status: string) => {
  const classes = {
    pending: 'bg-orange-100 text-orange-600',
    accepted: 'bg-blue-100 text-blue-600', 
    delivering: 'bg-green-100 text-green-600',
    completed: 'bg-gray-100 text-gray-600',
    cancelled: 'bg-red-100 text-red-600'
  }
  return classes[status] || 'bg-gray-100 text-gray-600'
}

const acceptOrder = (order: DeliveryOrder) => {
  console.log('接单', order.id)
  order.status = 'accepted'
  order.statusText = '已接单'
  // 实际项目中会调用API
}

const startDelivery = (order: DeliveryOrder) => {
  console.log('开始配送', order.id)
  order.status = 'delivering'
  order.statusText = '配送中'
  // 跳转到配送页面
  router.navigateTo({
    url: `/pages/rider/delivery/index?orderId=${order.id}`
  })
}

const completeDelivery = (order: DeliveryOrder) => {
  console.log('完成配送', order.id)
  order.status = 'completed'
  order.statusText = '已完成'
  // 实际项目中会调用API
}

const viewOrderDetail = (order: DeliveryOrder) => {
  console.log('查看订单详情', order.id)
  router.navigateTo({
    url: `/pages/order-detail/index?id=${order.id}`
  })
}

// 生命周期
onMounted(() => {
  console.log('骑手订单列表页面加载完成')
  // 可以加载最新的订单数据
})
</script>

<style lang="scss" scoped>
.cursor-pointer {
  cursor: pointer;
}

.transition-all {
  transition: all 0.3s ease;
}

.last\:mb-0:last-child {
  margin-bottom: 0;
}
</style> 